import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import { useNavigate, Link } from 'react-router-dom';

import { Input, Button, Typography } from 'antd'; // 引入 Ant Design 组件

import UserListABI from '../contract/ABIs/UserList.json';
import MarketplaceABI from '../contract/ABIs/Marketplace.json';
import MaterialListAddr from '../contract/ADDRESSes/MaterialListAddr';
import UserListAddr from '../contract/ADDRESSes/UserListAddr';
import '../styles.css'; // 引入全局CSS

const Register = () => {
    const [web3, setWeb3] = useState(null);
    const [email, setEmail] = useState('');
    const navigate = useNavigate();

    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [ContractUserList, setContractUserList] = useState(null);
    const [ContractMaterial, setContractMaterial] = useState(null);

    useEffect(() => {
        async function init() {
            if (window.ethereum) {
                const web3Instance = new Web3(window.ethereum);
                try {
                    await window.ethereum.enable();
                    setWeb3(web3Instance);

                    const UserListInstance = new web3Instance.eth.Contract(UserListABI, UserListAddr);
                    setContractUserList(UserListInstance);

                    const MaterialListInstance = new web3Instance.eth.Contract(MarketplaceABI, MaterialListAddr);
                    setContractMaterial(MaterialListInstance);
                } catch (error) {
                    console.error(error);
                }
            } else {
                console.error('请安装以太坊浏览器插件，如 MetaMask');
            }
        }
        init();
    }, []);

    const registerUser = async () => {
        try {
            const accounts = await web3.eth.getAccounts();
            await ContractUserList.methods.registerUser(email, username, password).send({ from: accounts[0] });
            alert('用户注册成功');
            navigate(`/login`);
        } catch (error) {
            console.error('用户注册失败', error);
        }
    };

    return (
        <div
            style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                // height: '300px', // 移除高度限制
                height: '100vh', // 使用 vh 单位
                backgroundColor: 'lightblue'
            }}
            className="container">
            <div className="header">
                <Typography.Title level={2} style={{ color: '#772F91' }}>先锋校园二手交易平台</Typography.Title>
                <Typography.Title level={3} style={{ color: '#772F91' }}>注册</Typography.Title>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '300px' }}>
                <input className="input-field"
                    style={{ width: '300px', marginBottom: '10px' }} type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
                <input className="input-field"
                    style={{ width: '300px', marginBottom: '10px' }} type="text" placeholder="用户名" value={username} onChange={(e) => setUsername(e.target.value)} />
                <input className="input-field"
                    style={{ width: '300px', marginBottom: '10px' }} type="password" placeholder="密码" value={password} onChange={(e) => setPassword(e.target.value)} />
                <button className="button-primary" style={{ width: '300px' }} onClick={registerUser} >注册</button>

            </div>
            <button className="button-primary" style={{ width: '300px' }}>
                <Link to={`/login`}>已有账户去登陆</Link></button>
        </div>
    );
};

export default Register;
